<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ShowReel Photon</title>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/x-template" id="dialog1" src="dialog1.html" data-js="js/dialog1.js"></script>
  </head>
  <body>
    <ph-window data-vibrancy="menu">
      <tool-bar type="header">
        <h1 class="title" style="-webkit-app-region: drag;">Show Real</h1>
        <div class="toolbar-actions" style="text-align: center;">
          <btn-group class="component-groups" type="absolute">
            <button class="btn btn-default active" data-view="#swipe">Components</button>
            <button class="btn btn-default" data-view="#frames">Frames & Panes</button>
            <button class="btn btn-default" data-view="#table">Table</button>
            <button class="btn btn-default" data-view="#messages">Messages</button>
          </btn-group>
          <button class="btn btn-default pull-left btn-show-popup">Pop Up</button>
          <button class="btn btn-default pull-left btn-show-menu">Drop Down Menu</button>
          <input type="search" class="pull-right" style="margin-right: 6px;" placeholder="Search">
        </div>
      </tool-bar>
      <tab-group>
        <tab-item type="fixed" class="active">
          Fixed Tab
        </tab-item>
        <tab-item>
          <button action="close"></button>
          Tab 2
        </tab-item>
        <tab-item>
          <button action="close"></button>
          Tab 3
        </tab-item>
        <tab-item type="fixed" action="add"></tab-item>
      </tab-group>
      <window-content>
        <div id="swipe">
          <div class="pane-group">
            <div class="pane-sm sidebar" style="max-width: 250px;">
              <header>
                <input type="search" class="input-sidebar" placeholder="Search" style="width: 180px;">
              </header>
              <list-group>
                <list-item>
                  <action-list role="left">
                    <swipe-action style="background-color: #006ff1;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 33.84375 1.4375 L 28.71875 9.125 L 40.875 21.28125 L 48.5625 16.15625 Z M 28.1875 11.4375 C 24.710938 14.058594 20.484375 15 13 15 L 12.1875 15 L 12.03125 15.8125 C 10.175781 25.089844 3.867188 43.328125 3.125 45.46875 L 21.28125 27.28125 C 21.332031 27.230469 21.410156 27.226563 21.46875 27.1875 C 21.292969 26.824219 21.1875 26.398438 21.1875 25.96875 C 21.1875 24.453125 22.421875 23.25 23.9375 23.25 C 25.453125 23.25 26.6875 24.453125 26.6875 25.96875 C 26.6875 27.488281 25.457031 28.71875 23.9375 28.71875 C 23.550781 28.71875 23.179688 28.644531 22.84375 28.5 C 22.800781 28.570313 22.777344 28.660156 22.71875 28.71875 L 4.53125 46.875 C 6.664063 46.132813 24.90625 39.824219 34.1875 37.96875 L 35 37.8125 L 35 37 C 35 29.515625 35.941406 25.289063 38.5625 21.8125 Z "></path>
                          </svg>
                        </div>
                        <span>Action A</span>
                      </action-inner>
                    </swipe-action>
                    <swipe-action style="background-color: #00b16c;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 9 8 C 8.449219 8 8 8.449219 8 9 L 5 9 C 4.449219 9 4 9.449219 4 10 L 4 19 C 4 19.550781 4.449219 20 5 20 C 6.457031 20 8 21.542969 8 23 C 8 24.296875 7.144531 25.582031 6.054688 27.214844 C 4.34375 29.78125 2 33.296875 2 39 C 2 39.058594 2.003906 39.117188 2.015625 39.171875 C 2.035156 39.289063 2.558594 42 6.550781 42 L 11.882813 42 C 14.375 42 15.714844 41.082031 16.214844 39.03125 L 18.777344 29 L 28.320313 29 C 28.75 29 29.132813 28.722656 29.269531 28.316406 L 31.71875 21 L 44 21 C 44.265625 21 44.519531 20.894531 44.707031 20.707031 L 45.414063 20 L 47 20 C 47.550781 20 48 19.550781 48 19 L 48 10 C 48 9.449219 47.550781 9 47 9 L 45.414063 9 L 44.707031 8.292969 C 44.519531 8.105469 44.265625 8 44 8 L 42 8 C 41.449219 8 41 8.449219 41 9 L 12.414063 9 L 11.707031 8.292969 C 11.519531 8.105469 11.265625 8 11 8 Z M 21 13 L 27 13 C 27.550781 13 28 13.449219 28 14 C 28 14.550781 27.550781 15 27 15 L 21 15 C 20.449219 15 20 14.550781 20 14 C 20 13.449219 20.449219 13 21 13 Z M 24.191406 21 L 29.609375 21 L 27.601563 27 L 21.871094 27 C 21.5625 26.648438 21 25.757813 21 24 C 21 22.769531 21.402344 21.929688 22.203125 21.453125 C 22.285156 23.035156 23 24.941406 25.34375 25.824219 C 25.457031 25.867188 25.578125 25.890625 25.691406 25.890625 C 26.097656 25.890625 26.480469 25.640625 26.628906 25.242188 C 26.824219 24.722656 26.5625 24.148438 26.046875 23.953125 C 24.355469 23.316406 24.152344 21.875 24.191406 21 Z "></path>
                          </svg>
                        </div>
                        <span>Action B</span>
                      </action-inner>
                    </swipe-action>
                  </action-list>
                  <item-inner>
                    <img class="img-circle media-object pull-left" src="https://maurice-conrad.eu/acting/images/big-narrenkaefig-1.jpg" width="32" height="32" alt="" />
                    <div class="media-body">
                      <strong>Swipe Me Both!</strong>
                      <p>Swipe me to left or right!
                    </div>
                  </item-inner>
                  <action-list role="right">
                    <swipe-action style="background-color: #1aa431;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 24.984375 -0.013671875 A 1.0001 1.0001 0 0 0 24 1 L 24 8.5859375 L 19.707031 4.2929688 A 1.0001 1.0001 0 0 0 18.990234 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 5.7070312 L 24 11.414062 L 24 23.269531 L 13.734375 17.341797 L 11.646484 9.5449219 A 1.0001 1.0001 0 0 0 10.699219 8.7910156 A 1.0001 1.0001 0 0 0 9.7148438 10.0625 L 11.285156 15.927734 L 4.7148438 12.134766 A 1.0001 1.0001 0 0 0 4.2402344 11.992188 A 1.0001 1.0001 0 0 0 4.140625 11.994141 A 1.0001 1.0001 0 0 0 3.7148438 13.865234 L 10.285156 17.658203 L 4.421875 19.230469 A 1.0001 1.0001 0 1 0 4.9394531 21.162109 L 12.736328 19.074219 L 23.001953 25 L 12.736328 30.925781 L 4.9394531 28.837891 A 1.0001 1.0001 0 0 0 4.6425781 28.800781 A 1.0001 1.0001 0 0 0 4.421875 30.769531 L 10.285156 32.341797 L 3.7148438 36.134766 A 1.0001 1.0001 0 1 0 4.7148438 37.865234 L 11.285156 34.072266 L 9.7148438 39.9375 A 1.0001 1.0001 0 1 0 11.646484 40.455078 L 13.734375 32.658203 L 24 26.730469 L 24 38.585938 L 18.292969 44.292969 A 1.0001 1.0001 0 1 0 19.707031 45.707031 L 24 41.414062 L 24 49 A 1.0001 1.0001 0 1 0 26 49 L 26 41.414062 L 30.292969 45.707031 A 1.0001 1.0001 0 1 0 31.707031 44.292969 L 26 38.585938 L 26 26.730469 L 36.265625 32.658203 L 38.353516 40.455078 A 1.0001 1.0001 0 1 0 40.285156 39.9375 L 38.714844 34.072266 L 45.285156 37.865234 A 1.0001 1.0001 0 1 0 46.285156 36.134766 L 39.714844 32.341797 L 45.578125 30.769531 A 1.0001 1.0001 0 0 0 45.328125 28.800781 A 1.0001 1.0001 0 0 0 45.060547 28.837891 L 37.263672 30.925781 L 26.998047 25 L 37.263672 19.074219 L 45.060547 21.162109 A 1.0001 1.0001 0 1 0 45.578125 19.230469 L 39.714844 17.658203 L 46.285156 13.865234 A 1.0001 1.0001 0 0 0 45.830078 11.994141 A 1.0001 1.0001 0 0 0 45.285156 12.134766 L 38.714844 15.927734 L 40.285156 10.0625 A 1.0001 1.0001 0 0 0 39.269531 8.7910156 A 1.0001 1.0001 0 0 0 38.353516 9.5449219 L 36.265625 17.341797 L 26 23.269531 L 26 11.414062 L 31.707031 5.7070312 A 1.0001 1.0001 0 1 0 30.292969 4.2929688 L 26 8.5859375 L 26 1 A 1.0001 1.0001 0 0 0 24.984375 -0.013671875 z"></path>
                          </svg>
                        </div>
                        <span>Action A</span>
                      </action-inner>
                    </swipe-action>
                    <swipe-action style="background-color: #464646;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 21 0 L 8 4.625 C 7.449219 4.808594 7 5.417969 7 5.96875 L 7 17.78125 C 6.546875 17.707031 6.035156 17.714844 5.5 17.84375 C 3.566406 18.316406 2 20.0625 2 21.71875 C 2 23.375 3.566406 24.316406 5.5 23.84375 C 7.410156 23.378906 8.960938 21.699219 9 20.0625 C 9 20.042969 9 20.019531 9 20 L 9 8.28125 L 20 4.34375 L 20 14.78125 C 19.546875 14.707031 19.035156 14.714844 18.5 14.84375 C 16.566406 15.316406 15 17.0625 15 18.71875 C 15 20.375 16.566406 21.316406 18.5 20.84375 C 20.433594 20.371094 22 18.65625 22 17 L 22 1 C 22 0.449219 21.550781 0 21 0 Z "></path>
                          </svg>
                        </div>
                        <span>Action B</span>
                      </action-inner>
                    </swipe-action>
                    <swipe-action style="background-color: #c514db;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 3 4 C 1.347656 4 0 5.347656 0 7 L 0 33.09375 C 1.464844 25.296875 3.105469 16.550781 3.1875 16.125 C 3.695313 13.535156 5.648438 12 8.4375 12 L 47 12 L 47 11 C 47 9.347656 45.652344 8 44 8 L 18.03125 8 C 17.753906 7.898438 17.183594 6.992188 16.875 6.5 C 16.105469 5.273438 15.316406 4 14 4 Z M 8.4375 14 C 7.15625 14 5.5625 14.449219 5.15625 16.53125 C 5.027344 17.179688 1.132813 37.910156 0 43.9375 L 0 44 C 0 45.652344 1.347656 47 3 47 L 42 47 C 43.621094 47 44.945313 45.703125 45 44.09375 L 49.96875 17.1875 L 50 17 C 50 15.347656 48.652344 14 47 14 Z "></path>
                          </svg>
                        </div>
                        <span>Action C</span>
                      </action-inner>
                    </swipe-action>
                  </action-list>
                </list-item>
                <list-item>
                  <action-list role="left">
                    <swipe-action style="background-color: #fb9700;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 16.5 0 C 12.359375 0 9 1.789063 9 4 C 9 6.210938 12.359375 8 16.5 8 C 20.640625 8 24 6.210938 24 4 C 24 1.789063 20.640625 0 16.5 0 Z M 9.0625 5.5 C 9.023438 5.664063 9 5.828125 9 6 L 9 7 C 9 7.847656 9.496094 8.632813 10.34375 9.28125 C 11.804688 9.578125 13.066406 10.101563 14.03125 10.78125 C 14.800781 10.925781 15.636719 11 16.5 11 C 20.640625 11 24 9.210938 24 7 L 24 6 C 24 5.828125 23.976563 5.664063 23.9375 5.5 C 23.476563 7.472656 20.324219 9 16.5 9 C 12.675781 9 9.523438 7.472656 9.0625 5.5 Z M 23.9375 8.5 C 23.476563 10.472656 20.324219 12 16.5 12 C 16.078125 12 15.683594 11.972656 15.28125 11.9375 C 15.746094 12.558594 15.996094 13.265625 16 14 C 16.164063 14.003906 16.332031 14 16.5 14 C 20.640625 14 24 12.210938 24 10 L 24 9 C 24 8.828125 23.976563 8.664063 23.9375 8.5 Z M 7.5 10 C 3.359375 10 0 11.789063 0 14 C 0 16.210938 3.359375 18 7.5 18 C 11.640625 18 15 16.210938 15 14 C 15 11.789063 11.640625 10 7.5 10 Z M 23.9375 11.5 C 23.476563 13.472656 20.324219 15 16.5 15 C 16.332031 15 16.164063 15.003906 16 15 L 16 17 C 16.164063 17.003906 16.332031 17 16.5 17 C 20.640625 17 24 15.210938 24 13 L 24 12 C 24 11.828125 23.976563 11.664063 23.9375 11.5 Z M 23.9375 14.5 C 23.476563 16.472656 20.324219 18 16.5 18 C 16.332031 18 16.164063 18.003906 16 18 L 16 20 C 16.164063 20.003906 16.332031 20 16.5 20 C 20.640625 20 24 18.210938 24 16 L 24 15 C 24 14.828125 23.976563 14.664063 23.9375 14.5 Z M 0.0625 15.5 C 0.0234375 15.664063 0 15.828125 0 16 L 0 17 C 0 19.210938 3.359375 21 7.5 21 C 11.640625 21 15 19.210938 15 17 L 15 16 C 15 15.828125 14.976563 15.664063 14.9375 15.5 C 14.476563 17.472656 11.324219 19 7.5 19 C 3.675781 19 0.523438 17.472656 0.0625 15.5 Z M 0.0625 18.5 C 0.0234375 18.664063 0 18.828125 0 19 L 0 20 C 0 22.210938 3.359375 24 7.5 24 C 11.640625 24 15 22.210938 15 20 L 15 19 C 15 18.828125 14.976563 18.664063 14.9375 18.5 C 14.476563 20.472656 11.324219 22 7.5 22 C 3.675781 22 0.523438 20.472656 0.0625 18.5 Z "></path>
                          </svg>
                        </div>
                        <span>Action A</span>
                      </action-inner>
                    </swipe-action>
                    <swipe-action style="background-color: #0061b1;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 49.605469 0.21875 C 49.296875 -0.0234375 48.875 -0.0585938 48.527344 0.128906 L 0.527344 26.128906 C 0.179688 26.316406 -0.0234375 26.695313 0.015625 27.089844 C 0.0507813 27.484375 0.316406 27.820313 0.691406 27.941406 L 14.335938 32.394531 L 13.015625 45.902344 C 12.972656 46.332031 13.210938 46.738281 13.605469 46.90625 C 13.730469 46.964844 13.867188 46.992188 14 46.992188 C 14.277344 46.992188 14.550781 46.875 14.742188 46.65625 L 23.347656 36.933594 L 36.304688 49.707031 C 36.492188 49.890625 36.742188 49.992188 37 49.992188 C 37.089844 49.992188 37.179688 49.976563 37.269531 49.953125 C 37.609375 49.859375 37.875 49.585938 37.960938 49.242188 L 49.960938 1.242188 C 50.054688 0.859375 49.917969 0.457031 49.605469 0.21875 Z M 16.34375 32.210938 L 35.855469 16.433594 L 22.558594 34.84375 L 15.28125 43.058594 Z "></path>
                          </svg>
                        </div>
                        <span>Action B</span>
                      </action-inner>
                    </swipe-action>
                  </action-list>
                  <item-inner>
                    <img class="img-circle media-object pull-left" src="https://maurice-conrad.eu/acting/images/big-narrenkaefig-6.jpg" width="32" height="32" alt="" />
                    <div class="media-body">
                      <strong>Swipe Me Left!</strong>
                      <p>Lorem ipsum dolor sit amet</p>
                    </div>
                  </item-inner>
                </list-item>
                <list-item>
                  <item-inner>
                    <img class="img-circle media-object pull-left" src="https://maurice-conrad.eu/acting/images/big-rothaarigefrau-1.jpg" width="32" height="32" alt="" />
                    <div class="media-body">
                      <strong>Swipe Me Right!</strong>
                      <p>Lorem ipsum dolor sit amet dolor</p>
                    </div>
                  </item-inner>
                  <action-list role="right">
                    <swipe-action style="background-color: #cdcf5a;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 15 2 C 14.448 2 14 2.448 14 3 L 14 3.171875 C 14 3.649875 13.663406 4.0763437 13.191406 4.1523438 C 12.962406 4.1893437 12.735719 4.2322031 12.511719 4.2832031 C 12.047719 4.3892031 11.578484 4.1265 11.396484 3.6875 L 11.330078 3.53125 C 11.119078 3.02125 10.534437 2.7782344 10.023438 2.9902344 C 9.5134375 3.2012344 9.2704219 3.785875 9.4824219 4.296875 L 9.5488281 4.4570312 C 9.7328281 4.8970313 9.5856875 5.4179219 9.1796875 5.6699219 C 8.9836875 5.7919219 8.7924688 5.9197344 8.6054688 6.0527344 C 8.2174688 6.3297344 7.68075 6.2666875 7.34375 5.9296875 L 7.2226562 5.8085938 C 6.8316562 5.4175937 6.1985937 5.4175938 5.8085938 5.8085938 C 5.4185938 6.1995938 5.4185938 6.8326563 5.8085938 7.2226562 L 5.9296875 7.34375 C 6.2666875 7.68075 6.3297344 8.2164688 6.0527344 8.6054688 C 5.9197344 8.7924687 5.7919219 8.9836875 5.6699219 9.1796875 C 5.4179219 9.5856875 4.8960781 9.7337812 4.4550781 9.5507812 L 4.296875 9.484375 C 3.786875 9.273375 3.2002813 9.5153906 2.9882812 10.025391 C 2.7772813 10.535391 3.0192969 11.120031 3.5292969 11.332031 L 3.6855469 11.396484 C 4.1245469 11.578484 4.3892031 12.047719 4.2832031 12.511719 C 4.2322031 12.735719 4.1873906 12.962406 4.1503906 13.191406 C 4.0753906 13.662406 3.649875 14 3.171875 14 L 3 14 C 2.448 14 2 14.448 2 15 C 2 15.552 2.448 16 3 16 L 3.171875 16 C 3.649875 16 4.0763437 16.336594 4.1523438 16.808594 C 4.1893437 17.037594 4.2322031 17.264281 4.2832031 17.488281 C 4.3892031 17.952281 4.1265 18.421516 3.6875 18.603516 L 3.53125 18.669922 C 3.02125 18.880922 2.7782344 19.465563 2.9902344 19.976562 C 3.2012344 20.486563 3.785875 20.729578 4.296875 20.517578 L 4.4570312 20.451172 C 4.8980312 20.268172 5.418875 20.415312 5.671875 20.820312 C 5.793875 21.016313 5.9206875 21.208484 6.0546875 21.396484 C 6.3316875 21.784484 6.2686406 22.321203 5.9316406 22.658203 L 5.8085938 22.779297 C 5.4175937 23.170297 5.4175938 23.803359 5.8085938 24.193359 C 6.1995938 24.583359 6.8326562 24.584359 7.2226562 24.193359 L 7.3457031 24.072266 C 7.6827031 23.735266 8.2174688 23.670266 8.6054688 23.947266 C 8.7934688 24.081266 8.9856406 24.210031 9.1816406 24.332031 C 9.5866406 24.584031 9.7357344 25.105875 9.5527344 25.546875 L 9.4863281 25.705078 C 9.2753281 26.215078 9.5173438 26.801672 10.027344 27.013672 C 10.537344 27.224672 11.121984 26.982656 11.333984 26.472656 L 11.398438 26.316406 C 11.580438 25.877406 12.049672 25.61275 12.513672 25.71875 C 12.737672 25.76975 12.964359 25.814562 13.193359 25.851562 C 13.662359 25.924562 14 26.350125 14 26.828125 L 14 27 C 14 27.552 14.448 28 15 28 C 15.552 28 16 27.552 16 27 L 16 26.828125 C 16 26.350125 16.336594 25.923656 16.808594 25.847656 C 17.037594 25.810656 17.264281 25.767797 17.488281 25.716797 C 17.952281 25.610797 18.421516 25.8735 18.603516 26.3125 L 18.669922 26.46875 C 18.880922 26.97875 19.465563 27.221766 19.976562 27.009766 C 20.486563 26.798766 20.729578 26.214125 20.517578 25.703125 L 20.451172 25.542969 C 20.268172 25.101969 20.415312 24.581125 20.820312 24.328125 C 21.016313 24.206125 21.208484 24.079312 21.396484 23.945312 C 21.784484 23.668312 22.321203 23.731359 22.658203 24.068359 L 22.779297 24.191406 C 23.170297 24.582406 23.803359 24.582406 24.193359 24.191406 C 24.583359 23.800406 24.584359 23.167344 24.193359 22.777344 L 24.072266 22.654297 C 23.735266 22.317297 23.670266 21.782531 23.947266 21.394531 C 24.081266 21.206531 24.210031 21.014359 24.332031 20.818359 C 24.584031 20.413359 25.105875 20.264266 25.546875 20.447266 L 25.705078 20.513672 C 26.215078 20.724672 26.801672 20.482656 27.013672 19.972656 C 27.224672 19.462656 26.982656 18.878016 26.472656 18.666016 L 26.316406 18.601562 C 25.877406 18.419563 25.61275 17.950328 25.71875 17.486328 C 25.76975 17.262328 25.814562 17.035641 25.851562 16.806641 C 25.924562 16.337641 26.350125 16 26.828125 16 L 27 16 C 27.552 16 28 15.552 28 15 C 28 14.448 27.552 14 27 14 L 26.828125 14 C 26.350125 14 25.923656 13.663406 25.847656 13.191406 C 25.810656 12.962406 25.767797 12.735719 25.716797 12.511719 C 25.610797 12.047719 25.8735 11.578484 26.3125 11.396484 L 26.46875 11.330078 C 26.97875 11.119078 27.221766 10.534437 27.009766 10.023438 C 26.798766 9.5134375 26.214125 9.2704219 25.703125 9.4824219 L 25.542969 9.5488281 C 25.101969 9.7318281 24.581125 9.5846875 24.328125 9.1796875 C 24.206125 8.9836875 24.079312 8.7915156 23.945312 8.6035156 C 23.668312 8.2155156 23.731359 7.6787969 24.068359 7.3417969 L 24.191406 7.2207031 C 24.582406 6.8297031 24.582406 6.1966406 24.191406 5.8066406 C 23.800406 5.4156406 23.167344 5.4156406 22.777344 5.8066406 L 22.65625 5.9296875 C 22.31925 6.2666875 21.782531 6.3316875 21.394531 6.0546875 C 21.206531 5.9206875 21.014359 5.7919219 20.818359 5.6699219 C 20.413359 5.4179219 20.266219 4.8960781 20.449219 4.4550781 L 20.515625 4.296875 C 20.726625 3.786875 20.484609 3.2002812 19.974609 2.9882812 C 19.464609 2.7772813 18.879969 3.0192969 18.667969 3.5292969 L 18.601562 3.6855469 C 18.419563 4.1245469 17.950328 4.3892031 17.486328 4.2832031 C 17.262328 4.2322031 17.035641 4.1873906 16.806641 4.1503906 C 16.336641 4.0753906 16 3.649875 16 3.171875 L 16 3 C 16 2.448 15.552 2 15 2 z M 15 7 C 19.078645 7 22.438586 10.054876 22.931641 14 L 16.728516 14 A 2 2 0 0 0 15 13 A 2 2 0 0 0 14.998047 13 L 11.896484 7.625 C 12.850999 7.222729 13.899211 7 15 7 z M 10.169922 8.6328125 L 13.269531 14 A 2 2 0 0 0 13 15 A 2 2 0 0 0 13.269531 15.996094 L 10.167969 21.365234 C 8.2464258 19.903996 7 17.600071 7 15 C 7 12.398945 8.2471371 10.093961 10.169922 8.6328125 z M 16.730469 16 L 22.931641 16 C 22.438586 19.945124 19.078645 23 15 23 C 13.899211 23 12.850999 22.777271 11.896484 22.375 L 14.998047 17 A 2 2 0 0 0 15 17 A 2 2 0 0 0 16.730469 16 z"></path>
                          </svg>
                        </div>
                        <span>Action A</span>
                      </action-inner>
                    </swipe-action>
                    <swipe-action style="background-color: #ff1313;">
                      <action-inner>
                        <div class="icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
                            <path style="fill: #fff;" d="M 42 5 L 32 5 L 32 3 C 32 1.347656 30.652344 0 29 0 L 21 0 C 19.347656 0 18 1.347656 18 3 L 18 5 L 8 5 C 7.449219 5 7 5.449219 7 6 C 7 6.550781 7.449219 7 8 7 L 9.085938 7 L 12.695313 47.515625 C 12.820313 48.90625 14.003906 50 15.390625 50 L 34.605469 50 C 35.992188 50 37.175781 48.90625 37.300781 47.515625 L 40.914063 7 L 42 7 C 42.554688 7 43 6.550781 43 6 C 43 5.449219 42.554688 5 42 5 Z M 20 44 C 20 44.554688 19.550781 45 19 45 C 18.449219 45 18 44.554688 18 44 L 18 11 C 18 10.449219 18.449219 10 19 10 C 19.550781 10 20 10.449219 20 11 Z M 20 3 C 20 2.449219 20.449219 2 21 2 L 29 2 C 29.550781 2 30 2.449219 30 3 L 30 5 L 20 5 Z M 26 44 C 26 44.554688 25.550781 45 25 45 C 24.449219 45 24 44.554688 24 44 L 24 11 C 24 10.449219 24.449219 10 25 10 C 25.550781 10 26 10.449219 26 11 Z M 32 44 C 32 44.554688 31.554688 45 31 45 C 30.445313 45 30 44.554688 30 44 L 30 11 C 30 10.449219 30.445313 10 31 10 C 31.554688 10 32 10.449219 32 11 Z "></path>
                          </svg>
                        </div>
                        <span>Action B</span>
                      </action-inner>
                    </swipe-action>
                  </action-list>
                </list-item>
              </list-group>
            </div>
            <div class="pane theme-gray">
              <div class="main-border" style="text-align: center;">
                <btn-group type="absolute" style="margin-top: -45px">
                  <button class="btn btn-segment active">Segment A</button>
                  <button class="btn btn-segment">Segment B</button>
                  <button class="btn btn-segment">Segment C</button>
                </btn-group>
                <br><br>
                <btn-group type="relative">
                  <button class="btn btn-segment active">Segment 1</button>
                  <button class="btn btn-segment">Segment 2</button>
                  <button class="btn btn-segment">Segment 3</button>
                </btn-group>
                <br><br>
                <input type="text" value="Text">
                <br>
                <input type="number" value="10" id="myInputWithStepper">
                <input-stepper for="#myInputWithStepper">
                  <button></button>
                  <button></button>
                </input-stepper>
                <br>
                <input type="number" value="5" step="0.5" id="myInputWithSuffix" data-suffix=" px" oninput="console.log(event)">
                <input-stepper for="#myInputWithSuffix">
                  <button></button>
                  <button></button>
                </input-stepper>
                <br><br>
                <input type="range" min="-50" value="50" max="150" class="slider slider-round blue" style="width: 200px;">
                <br>
                <input type="range" class="slider slider-square" style="width: 200px; margin-top: 15px;">
                <br>
                <input type="range" class="slider slider-square-inverted" style="width: 200px; margin-top: 15px;">
                <br><br>
                <circular-slider value="250">
                  <!--<div class="dot"></div>-->
                </circular-slider>
                <br><br>
                <div>
                  <number-input maxlength="2" max="31" min="1" value="1"></number-input>
                  <number-input maxlength="2" max="12" min="1" value="6"></number-input>
                  <number-input maxlength="4" value="2018"></number-input>
                </div>
                <br><br>
                <button class="btn btn-system">Cancel</button>
                <button class="btn btn-system btn-active">Button</button>
                <br><br>
                <progress class="progress" value="50" max="100" style="width: 200px;"></progress>
                <br />
                <progress class="progress" style="width: 200px;"></progress>
                <br />
                <progress-circle value="0.635"></progress-circle>
              </div>
            </div>
          </div>
        </div>
        <div id="frames" style="display: none;">
          <div class="pane-group">
            <div class="pane">
              <content-frame style="height: 300px;">
                <frame-inner>
                  <div class="pane-group">
                    <div class="pane">
                      <list-select class="list-editable">
                        <li class="active" draggable="true">
                          <details>
                            <summary>Apple</summary>
                            <list-select>
                              <li draggable="true">Pinapple</li>
                              <li draggable="true">Apple</li>
                            </list-select>
                          </details>
                        </li>
                        <li draggable="true">
                          <span>Strawberry</span>
                        </li>
                        <li draggable="true">
                          <span>Cherry</span>
                        </li>
                        <li draggable="false">
                          <span>Leave me alone!</span>
                        </li>
                      </list-select>
                    </div>
                    <div class="pane">
                      <list-select class="list-editable">
                        <li class="active" draggable="true">
                          <details>
                            <summary>Apple</summary>
                            <list-select>
                              <li>Pinapple</li>
                              <li>Apple</li>
                            </list-select>
                          </details>
                        </li>
                        <li draggable="true">
                          <span>Strawberry</span>
                        </li>
                        <li draggable="true">
                          <span>Cherry</span>
                        </li>
                      </list-select>
                    </div>
                  </div>
                </frame-inner>
                <div class="toolbar">
                  <button class="btn btn-add"></button>
                  <button class="btn btn-remove" disabled></button>
                </div>
              </content-frame>
            </div>
            <div class="pane">
              <content-frame style="height: 300px;">
                <frame-inner>
                  <list-select class="list-editable">
                    <li class="active" draggable="true">
                      <details>
                        <summary>Orange</summary>
                        <list-select>
                          <li>Bloodorange</li>
                          <li>Orange</li>
                        </list-select>
                      </details>
                    </li>
                    <li draggable="true">
                      <span>Banana</span>
                    </li>
                    <li draggable="true">
                      <span>Grapefruit</span>
                    </li>
                  </list-select>
                </frame-inner>
                <div class="toolbar">
                  <button class="btn btn-add"></button>
                  <button class="btn btn-remove" disabled></button>
                </div>
              </content-frame>
            </div>
          </div>
        </div>
        <div id="table" style="display: none;">
          <div class="pane-group">
            <div class="pane-sm sidebar">
              <nav-group>
                <h5 class="nav-group-title">Favorites</h5>
                <nav-item class="active">
                  <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%">
                      <g id="surface1">
                        <path style="fill: #676767;" d="M 20 20 L 20 12 L 22 12 L 12 3 L 2 12 L 4 12 L 4 20 C 4 20.601563 4.398438 21 5 21 L 10 21 L 10 14 L 14 14 L 14 21 L 19 21 C 19.601563 21 20 20.601563 20 20 Z "></path>
                      </g>
                    </svg>
                  </div>
                  connors
                </nav-item>
                <nav-item>
                  <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="100%" height="100%">
                      <path style="fill: #676767;" d="M25.983,13.342C25.988,13.228,26,13.116,26,13c0-4.418-3.582-8-8-8c-3.11,0-5.8,1.779-7.123,4.371 C10.296,9.136,9.665,9,9,9c-2.53,0-4.599,1.885-4.932,4.324C1.703,14.129,0,16.363,0,19c0,3.314,2.686,6,6,6h18 c3.314,0,6-2.686,6-6C30,16.382,28.321,14.162,25.983,13.342z M18.707,18.707l-3,3C15.512,21.902,15.256,22,15,22 s-0.512-0.098-0.707-0.293l-3-3c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0L14,18.586V13c0-0.552,0.447-1,1-1 s1,0.448,1,1v5.586l1.293-1.293c0.391-0.391,1.023-0.391,1.414,0S19.098,18.316,18.707,18.707z"></path>
                    </svg>
                  </div>
                  Downloads
                </nav-item>
                <nav-item>
                  <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="100%" height="100%">
                      <path style="fill: #676767;" d="M 4 3 C 2.895 3 2 3.895 2 5 L 2 8 L 13 8 L 28 8 L 28 7 C 28 5.895 27.105 5 26 5 L 11.199219 5 L 10.582031 3.9707031 C 10.221031 3.3687031 9.5701875 3 8.8671875 3 L 4 3 z M 3 10 C 2.448 10 2 10.448 2 11 L 2 23 C 2 24.105 2.895 25 4 25 L 26 25 C 27.105 25 28 24.105 28 23 L 28 11 C 28 10.448 27.552 10 27 10 L 3 10 z"></path>
                    </svg>
                  </div>
                  Documents
                </nav-item>
                <nav-item>
                  <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%">
                      <g id="surface1">
                        <path style="fill: #676767;" d="M 12 3 C 7.546875 3 3.398438 4.707031 0.40625 7.59375 L 1.78125 9.03125 C 4.390625 6.515625 8.054688 5 12 5 C 15.945313 5 19.492188 6.492188 22.21875 9.03125 L 23.59375 7.5625 C 20.519531 4.699219 16.453125 3 12 3 Z M 12 8 C 8.847656 8 5.988281 9.214844 3.8125 11.28125 L 5.1875 12.71875 C 7.011719 10.984375 9.351563 10 12 10 C 14.625 10 17 11.089844 18.84375 12.75 L 20.15625 11.25 C 18 9.308594 15.175781 8 12 8 Z M 12 13 C 10.148438 13 8.484375 13.726563 7.21875 14.875 L 8.5625 16.34375 C 9.496094 15.492188 10.648438 15 12 15 C 13.351563 15 14.503906 15.492188 15.4375 16.34375 L 16.78125 14.875 C 15.515625 13.726563 13.851563 13 12 13 Z M 12 18 C 11.5 18 10.992188 18.199219 10.59375 18.5 L 12 20 L 13.40625 18.5 C 13.007813 18.199219 12.5 18 12 18 Z "></path>
                      </g>
                    </svg>
                  </div>
                  AirPlay
                </nav-item>
                <nav-item>
                  <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 26 26" version="1.1" width="100%" height="100%">
                      <g id="surface1">
                        <path style="fill: #676767;" d="M 5.125 1.09375 C 5.125 1.09375 9.15625 2.09375 11.78125 4.84375 C 13.9375 7.105469 14.078125 8.40625 13.3125 9.15625 L 12.34375 10.125 L 15.875 13.65625 L 17.71875 11.8125 C 17.820313 11.914063 18.304688 12.363281 18.9375 13 C 19.375 13.4375 19.28125 14.285156 19.125 14.59375 C 19.03125 14.78125 19.125 15.09375 19.125 15.09375 L 21.09375 17.0625 C 21.484375 17.453125 22.140625 17.453125 22.53125 17.0625 L 25.625 13.9375 C 26.015625 13.546875 26.011719 12.921875 25.625 12.53125 L 23.6875 10.5625 C 23.6875 10.5625 23.390625 10.429688 23.25 10.5 C 22.941406 10.65625 22.035156 10.753906 21.59375 10.3125 C 21.011719 9.730469 20.515625 9.234375 20.40625 9.125 L 20.625 8.90625 C 20.910156 8.621094 20.976563 8.199219 20.84375 7.84375 C 20.839844 7.835938 20.847656 7.820313 20.84375 7.8125 C 20.796875 7.691406 20.722656 7.597656 20.625 7.5 L 18.5 5.375 C 17.335938 4.210938 16.28125 3.15625 16 2.875 C 14.238281 1.109375 5.125 1.09375 5.125 1.09375 Z M 11 11.46875 L 0.3125 22.15625 C -0.078125 22.546875 -0.078125 23.171875 0.3125 23.5625 L 2.4375 25.6875 C 2.828125 26.078125 3.453125 26.078125 3.84375 25.6875 L 14.53125 15 Z "></path>
                      </g>
                    </svg>
                  </div>
                  Applications
                </nav-item>
                <nav-item>
                  <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%">
                      <g id="surface1">
                        <path style="fill: #676767;" d="M 36.0625 0 C 35.125 0 34.140625 0.550781 33.40625 1.5 L 25.125 13.125 C 23.933594 12.84375 22.726563 12.71875 21.5 12.71875 C 17.289063 12.71875 13.320313 14.367188 10.34375 17.34375 C 10.15625 17.53125 10.0625 17.765625 10.0625 18.03125 C 10.0625 18.296875 10.15625 18.5625 10.34375 18.75 L 31.25 39.65625 C 31.445313 39.851563 31.679688 39.9375 31.9375 39.9375 C 32.195313 39.9375 32.460938 39.820313 32.65625 39.625 C 36.589844 35.695313 38.152344 30.023438 36.8125 24.65625 L 48.5 16.6875 C 49.375 16.035156 49.933594 15.140625 50 14.25 C 50.050781 13.597656 49.8125 12.972656 49.375 12.53125 L 37.625 0.625 C 37.222656 0.214844 36.660156 0 36.0625 0 Z M 16.53125 27.75 L 0.21875 48.375 C -0.0976563 48.773438 -0.078125 49.359375 0.28125 49.71875 C 0.476563 49.914063 0.742188 50 1 50 C 1.21875 50 1.441406 49.925781 1.625 49.78125 L 22.21875 33.46875 Z "></path>
                      </g>
                    </svg>
                  </div>
                  Desktop
                </nav-item>
              </nav-group>
            </div>
            <div class="pane">
              <table class="table-striped">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Kind</th>
                    <th>File Size</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>photon.css</td>
                    <td>CSS</td>
                    <td>28K</td>
                  </tr>
                  <tr>
                    <td>photon.css</td>
                    <td>CSS</td>
                    <td>28K</td>
                  </tr>
                  <tr>
                    <td>photon.css</td>
                    <td>CSS</td>
                    <td>28K</td>
                  </tr>
                  ...
                  <tr>
                    <td>photon.css</td>
                    <td>CSS</td>
                    <td>28K</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div id="messages" style="display: none; height: 100%;">
          <messages-view style="height: 100%; position: relative;">
            <ul class="messages">

            </ul>
            <div class="toolbar">
              <input type="text" class="message-input" placeholder="iMessage">
              <button class="btn btn-emojis btn-input" data-insert-target=".message-input"></button>
              <button class="btn btn-mic"></button>
            </div>
          </messages-view>

        </div>
      </window-content>
      <tool-bar type="footer">

      </tool-bar>
    </ph-window>

  </body>
</html>
